<template>
    <el-menu router unique-opened :default-active="$route.path" background-color="#304156" text-color="#fff"
        active-text-color="#ffd04b">
        <div class="index">
            <img src="../../assets/images/logo.png">
            <h4>傲马外卖平台</h4>
        </div>
        <template v-for="(v, i) in routers ">
            <!-- 一级菜单 -->
            <el-menu-item :index="v.path" v-if="v.children.length <= 1" :key='i'>
                <i :class="v.icon"></i>
                <span slot="title">{{ v.meta.title }}</span>
            </el-menu-item>
            <!-- 二级菜单 -->
            <el-submenu :index="v.path" v-else :key="i">
                <template slot="title">
                    <i :class="v.icon"></i>
                    <span>{{ v.meta.title }}</span>
                </template>
                <el-menu-item v-for="(v2, i2) in v.children.filter(v3 => v3.isMenu)" :index="v2.path" :key="i2">{{
                    v2.meta.title }}</el-menu-item>
            </el-submenu>
        </template>
    </el-menu>
</template>
<script>
import { showRouter } from '@/router/index.js'
export default {
    data () {
        return {
            routers: showRouter().filter(v => v.isMenu)//过滤需要导航的路由
        }
    }
}
</script>

<style lang="less" scoped>
.index {
    margin: 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;

    img {
        width: 50px
    }
}

.el-menu {
    border: 0;

    .el-menu-item {
        min-width: 100px
    }
}
</style>